<template>
  <div style="background-color: #333;color:#fff;height: 100%;font-size: 0.35rem;overflow: auto;">
    <div style="padding: 0.1rem 0 0.1rem 0.1rem;background: #555;height: 0.8rem;display: flex;align-items: center;">
      <span style="border-bottom: 1px solid #fff;" @click="back">返回首页</span>
      <span style="flex:1;text-align: center;padding-right: 1.5rem;font-size: 0.4rem;">视频投稿</span>
    </div>
    <div>
      <h2 style="margin: 0.5rem 0 0.5rem;">上传视频</h2>
      <van-uploader :after-read="afterRead1" class="videostyle" v-if="!upFile.video"/>
      <video :src="upFile.video.objectUrl" style="display: inline-block;width: 90vw;margin: 0 5vw;background-color: #fff;height: 3rem;" controls v-else></video>     
    </div>
    <div>
      <h2 style="margin: 0.5rem 0 0.5rem;">上传封面</h2>
      <van-uploader :after-read="afterRead2" class="picstyle" v-if="!upFile.pic" />
      <img :src="upFile.pic.objectUrl" v-else style="display: inline-block;width: 90vw;margin: 0 5vw;background-color: #fff;height: 3rem;" />
    </div>
    <div style="margin: 0.5rem 0 0.5rem;">
      <van-cell-group inset style="margin-bottom: 0.2rem;">
        <van-field v-model="upFile.introduce" label="视频简介" placeholder="请输入视频简介" show-word-limit maxlength="1000" rows="4" type="textarea" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field v-model="upFile.title" label="视频标题" placeholder="请输入视频标题" />
      </van-cell-group>
    </div>
    <div style="margin: 0.2rem 1rem;">
      <van-button type="primary" block @click="addVideo">上传</van-button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import {reactive} from 'vue'
import axios from '../api/index.js'

const router = useRouter()

const back = ()=>{
  router.push('/tabbar')
}

let upFile = reactive({
  video:null,
  pic:null,
  introduce:'',
  title:''
})

const afterRead1 = (file) =>{//上传视频
  console.log(file);
  if(file.file.type.includes('video')){
    upFile.video = file
    console.log(upFile);

  }
  else{
    console.log('错误的文件');
  }
}

const afterRead2 = (file) =>{//上传封面
  console.log(file);
  if(file.file.type.includes('image')){
    upFile.pic = file
    console.log(upFile);
  }
  else{
    console.log('错误的文件');
  }
}

const addVideo = async() =>{
  try {
    console.log(upFile);
    await videoAdd(upFile.video.file)
    // await picAdd(upFile.pic.file)
    // await textAdd(upFile.introduce)
    // await titleAdd(upFile.title)
  } catch (error) {
    console.error(error);
  }

}

function videoAdd(file) {
  const size = 2 * 1024 * 1024
  const chunks = []
  let cur = 0
  while (cur < file.size) {
    chunks.push({ file: file.slice(cur, cur + size) })
    cur += size
  }
  // console.log(chunks);
  let chunkList = chunks.map((item,index) =>{
    return {
      file:item.file,
      size:item.file.size,
      name:`${file.name}-${index}`,
      fileName:file.name,
      index:index,
      total:chunks.length-1
    }
  })
  // console.log(chunkList);
  let List = chunkList.map(({file,fileName,total,name}) =>{
    const formData = new FormData()
    formData.append('file',file)
    formData.append('name',name)
    formData.append('filename',fileName)
    formData.append('total',total)
    return {formData}
  })
  List.map(({formData}) => {
    return(async () =>{
      console.log(formData);
        let res = await axios.post('/videoadd',formData)
        console.log(res);        
      }
    )()
  })
  console.log(List);
  // let res = await axios.post('/videoadd',{
  //   file:file
  // })
  // console.log(res,'视频');
}
async function picAdd(file) {
  console.log(file);

  let res = await axios.post('/picadd',{
    file:file
  })
  console.log(res,'图片');

}
async function textAdd(file) {
  console.log(file);

  let res = await axios.post('/textadd',{
    file:file
  })
  console.log(res,'描述');

}
async function titleAdd(file) {
  console.log(file);

  let res = await axios.post('titleadd',{
    file:file,
    token:window.localStorage.getItem('token')
  })
  console.log(res,'标题');

}

</script>

<style lang="less" scoped>
.van-uploader{
  width: 100vw;
}
.van-uploader__wrapper{
  width: 100vw;
}
:deep .van-uploader__upload{
  margin: 0 5vw;
  width: 90vw;
}
:root:root{
  --van-uploader-upload-background:#fff;
}
.videostyle{
  width: 100vw;
}
</style>